<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 字符串的扩展 ；

        // 1.includes ： 判断某个字符在字符串中是否含有；
        // var str = "abcdef";
        // var res = str.includes("c");
        // console.log(res);

        // 2.startsWith: 判断字符串 是否以某个字符开头 ；
        // var str = "abcdefg";
        // console.log( str.startsWith("cd"));
        // let reg = /^ab[a-z]+/g;
        // console.log(reg.test(str));

        // 3.endsWidth: 判断 字符串是否以某个字符结尾 
        // var str = "abcdef";
        // console.log(str.endsWith("b"));

        // 4. 补全开头的字符串 :padStart
        // var str = "abc";
        // var res = str.padStart(6, "-");
        // console.log(res);

        // 5.补全字符串后面的内容 ： padEnd
        // var str = "abc";
        // var res = str.padEnd(6,".");
        // console.log(res);

        // 6.repeat ： 循环字符串 ；
        // ES5: 
        // var str = "";
        // for(var i=0;i<3;i++){
        //     str += "*"
        // }
        // console.log(str);

        // ES6 的repeat 
        //    var res =  "*".repeat(5);
        //    console.log(res);

        // 过滤敏感词 ；
        // var str = "fdsafdsaXXfdafdsaXXXfdafdsaXXfdsafds";
        // var reg = /X+/g; // 匹配敏感词；
        // // 替换敏感词 ；
        // // var res  =  str.replace(reg,"*");
        // var res = str.replace(reg,function(arg){
        //     console.log(arg);
        //     return "*".repeat(arg.length);
        // })
        // console.log(res);

        // 7.模板字符串 
        // var str = "fdafdsa";
        // var str2 = `fdsafdsad`;
        // console.log(str2);

        //  第一 ： 支持换行 
        // var str = `fdsfd
        // safdsafds
        // afds`;
        // console.log(str);

        // 第二 ： 支持  变量的解析 .插值表达式 解析变量 ${变量}
        // ES5
        // var name = "张三";
        // // var str = "我的名字是"+name+" 我的年龄是20";
        // var str = '我的名字是'+name+' 我的年龄是20';
        // console.log(str);
        // ES6 
        // var name = "张三";
        // var str = `我的名字是${name}我的年龄是20`;
        // console.log(str);

        // 第三：插值表达式 可以接收有返还值的逻辑 ，可以做一些运算；
        // 简单的运算
        // var name = "张三";
        // var num  =20;
        // var str = `我的名字是${name}我的年龄是${num+"1"}`;
        // console.log(str)

        // 有返还值的逻辑
        // function fn(){
        //     return "hello";
        // }

        // var str = `你好${fn()}我的名字是张三`;
        // console.log(str);

        // if else  和 for 循环 这些 都不支持 ；
        // var str  = `你好${for(va)}我的名字是张三`;

        // 三元运算符 
        // var res = false?"张三":"李四";
        // console.log(res);
        var flag = true;
        document.onclick = function () {
            var color = "red";
            var str = `<div style="color:${flag ? color : 'yellow'}">我的名字是${flag ? "张三" : "李四"}<div>`;
            flag = !flag;
            document.body.innerHTML = str;
        }


    </script>
</body>

</html>